<template>
  <div class="order-look w-full h-full">
    <section class="address-search py-20 flex-space-between">
    <div @click="back"> < </div>
    <div>新增地址</div>
    <div></div>
    </section>

    <section>
      <van-contact-card
          type="edit"
          :name="currentContact.name"
          :tel="currentContact.tel"
          :editable="false"
      />
    </section>

    <section>
      <div class=" bg-fff h-full mt-20 pb-20">
        <div>
          <div class="flex  p-10 items-center flex-space-between">
            <div>店铺名称</div>
          </div>

          <van-collapse v-model="activeNames">
            <van-collapse-item title="商品详情" name="1">
              <div class="flex items-center flex-space-between mb-10" v-for="item in 5">
                <div>牛肉</div>
                <div>x1</div>
                <div>￥12</div>
              </div>
            </van-collapse-item>
          </van-collapse>


          <section class="mt-20">
            <div class="flex py-20 items-center flex-space-between ">
              <div>小计</div>
              <div>￥12</div>
            </div>
            <div class="flex py-20 mt-10 items-center flex-space-between ">
              <div>配送</div>
              <div>￥3</div>
            </div>
            <div class="flex py-20 mt-10 items-center flex-space-between ">
              <div>应付总计：</div>
              <div class="font-FF4444">￥15</div>
            </div>

            <div class="flex py-20 mt-10 items-center  ">
              <div>订单备注：</div>
              <div>不要辣</div>
            </div>
          </section>


        </div>
      </div>
    </section>

    <section class="">
      <div class=" bg-fff h-full mt-20 pb-20 p-10">
        <div class="flex  p-10 items-center flex-space-between">
          <div>订单信息</div>
        </div>

        <div class="ml-10">
          <div class="mb-10">
            订单号: <span>67567890987654</span>
          </div>
          <div class="mb-10"> 
            下单时间: <span>2021-08-01 11:20:21</span>
          </div>
          <div class="mb-10" @click="tel">
            商家电话: <span>18717319570</span> <span class="font-1092CA ml-10">复制</span>
          </div>
<!--          <div class="mb-10">-->
<!--            店铺信息: <span class="font-1092CA ml-10" @click="info">点击进入</span>-->
<!--          </div>-->

        </div>
      </div>
    </section>


  </div>
</template>

<script>

export default {
  name: 'Home',
  data() {
    return {
      title: ['待付款', '待配送', '待收货', '已完成', '退款', '撤销'],
      activeNames: ['1'],
      show: false,
      currentContact: {
        name: '张三',
        tel: '13000000000',
      },
    }
  },
  methods: {
    cacel() {
      this.show = true
    },
    tel(){
      this.$router.push('/tel')
    },
    back(){
      history.go(-1)
    },
    // info(){
    //   this.$router.push('/info')
    // }

  },


}
</script>

<style lang="less" scoped>
.order-look {
  background-color: #efefef;
  position: relative;
}

.address-search {
  background-color: #39a9ed;
  display: flex;
  align-items: center;
  height: 50px;
  color: #fff;
  justify-content: space-around;
}

.border-radius {
  border-radius: 5px;
}

.overlay {
  width: 80%;
  height: 200px;
  background-color: #efefefcc;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10px;

}
</style>
